<template>
    <div>
      <div id="box">
        <input @click="ck" v-model="e" type="checkbox" id="finish" />
        <label for="finish">已完成{{ finishnum }}/全部{{ allnum}}</label>
        <button @click="ck2">清除已完成任务</button>
      </div>
    </div>
  </template>
  
  <script>
  import bus from "../JS/bus";
  export default {
    data() {
      return {
        e: false,
        finishnum: 0,
        allnum: 0,
        num: 0,
        arr: [],
      };
    },
    methods: {
      ck() {
        if (!this.e) {
          this.finishnum = this.allnum;
        } else {
          this.finishnum = 0;
        }
        bus.$emit("send4", this.e);
      },
      ck2() {
        let arr = this.arr.filter((item) => {
          return item.status == false;
        });
        this.finishnum = 0;
        this.e = false;
        bus.$emit("send5", arr);
        localStorage.setItem("arr", JSON.stringify(arr));
      },
    },
    mounted() {
      bus.$on("send6", (val) => {
        this.e = val;
      });
      bus.$on("send3", (val) => {
        this.allnum = val.length;
        this.arr = val;
      });
      bus.$on("send2", (val) => {
        this.arr = val;
        if (val.length == 0) {
          this.e = false;
        }
        this.num = 0;
        for (let index = 0; index < val.length; index++) {
          if (!val[index].status) {
            this.e = false;
            break;
          } else {
            this.e = true;
          }
        }
        for (let index = 0; index < val.length; index++) {
          if (!val[index].status) {
            this.num++;
            continue;
          }
        }
        this.finishnum = val.length - this.num;
      });
    },
  };
  </script>
  <style lang="less" scoped>
  #box {
    width: 90%;
    height: 30px;
    outline: @outline;
    margin: auto;
    position: relative;
    margin-top: 10px;
  }
  
  input {
    position: absolute;
    left: 5px;
    top: 5px;
  }
  
  label {
    position: absolute;
    left: 25px;
    top: 4px;
    color: rgb(170, 38, 38);
  }
  
  #box>button:nth-child(3) {
    position: absolute;
    right: 8px;
    top: 5px;
    background-color: rgb(170, 38, 38);
    color: white;
  }
  </style>